<template slot-scope="props">
  <div>
  <el-form-item :label="'BizKey'+(index+1)" v-for="(bizKeyType, index) in bizKey" :bizKey="'bizKey.'+ index + '.bizKeyType'"
                :rules="{required: true, message: 'bizKey is required', trigger: 'change'}">
    <el-autocomplete
      v-model="bizKey.bizKeyType"
      :fetch-suggestions="querySearchBizKeyType"
      size="small"
      auto-complete="on"
      clearable
      placeholder="type"
    ></el-autocomplete>
    <el-input style="width: 300px;" size="medium" placeholder="value" v-model="bizKey.bizKeyValue" auto-complete="off" clearable></el-input>
    <el-button type="danger" @click.prevent="removeBizKey(bizKeyType)" icon="el-icon-delete" size="mini">Delete BizKey</el-button>
  </el-form-item>
  </div>
</template>

<script>
  /*eslint-disable*/
  export default{
    props:{
      bizKey:{
        type:Array,
      },
    },
    data(){
      return {
        bizKeyTypeList:[],
      }
    },
    methods: {
      querySearchBizKeyType: function (queryString, cb) {
        let bizKeyTypeList = this.bizKeyTypeList;
        let results = queryString ? bizKeyTypeList.filter(this.createFilter(queryString)) : bizKeyTypeList;
        cb(results);
      },
      createFilter: function (queryString) {
        return (option) => {
          return (option.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
        };
      },
      removeBizKey: function (item) {
        let index = this.bizKey.indexOf(item)
        if (index !== -1) {
          this.bizKey.splice(index, 1)
        }
      },
      getBizKeyTypeList: function () {
        this.bizKeyTypeList.push({
          value:"CMSReference"
        });
        this.bizKeyTypeList.push({
          value:"BLID"
        })
        this.bizKeyTypeList.push({
          value:"SHIPMENTNUMBER"
        })
//        let url = 'testcase/bizKeyTypeList';
//        this.$http.get(url).then(res => {
//          if (res.body.status === '400') {
//            this.$message({
//              type: 'error',
//              message: res.body.reason
//            })
//          } else {
//            for (let i = 0; i < res.body.length; i++) {
//              this.bizKeyTypeList.push({
//                bizKeyType: res.body
//              })
//            }
//          }
//        })
      },
    },
    mounted() {
      this.getBizKeyTypeList();
    }


  }
</script>
